<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>同一数据源图表</title>
<%@ include file="/app/includes/header.jsp"%>
<script type="text/javascript">
	/*
		需要引入highcharts.js和jquery-1.4.4.min.js文件
	*/
	/*
		线形图标,横轴坐标刻线 xAxis: {categories: []} 显示的名称也可通过代码循环取值
		如果同一个数据源生成不同的图表，只需将defaultSeriesType属性设置为相应图表类型的值即可
	*/
	function generateline() { 
		$('#container').after("<div id=\"containerLine\"></div>");
		
		var options = {
					chart: {
						renderTo:'containerLine',
						defaultSeriesType: 'line',
						marginRight: 130,
						marginBottom: 25
					},
					title: {
						text: '我的标题',
						x: -20 //center
					},
					subtitle: {
						text: '来源: ccut.com',
						x: -20
					},
					credits: {
						text: 'Example.com',
        				href: 'http://www.example.com',
        				enabled: true,//是否显示Highcharts.com
        				position: {
            				align: 'left',
            				x: 10
        				}
   					},
					xAxis: {
						categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
							'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
					},
					yAxis: {
						title: {
							text: '摄氏度 (°C)'
						},
						//gridLineWidth: 10,//001墙壁的横线会变粗
						plotLines: [{
							value: 0,
							width: 1,
							color: '#808080'
						}]
					},
					tooltip: {
						formatter: function() {
				                return '<b>'+ this.series.name +'</b><br/>'+
								this.x +': '+ this.y +'摄氏度';
						}
					},
					legend: {
						layout: 'vertical',
						align: 'right',
						verticalAlign: 'top',
						x: 0,
						y: 100,
						borderWidth: 0
					},
					series:[]
				};
				
				$.ajax({  
					type: "get", 
					url: '<%=request.getContextPath()%>/highcharts/listLineDatas.action', 
					data: "iId=" + "" ,
					dataType: 'json',
					success:  function(json){
					
						for (var i = 0; i < json.rows.length; i++) {
							options.series.push(json.rows[i]);
						}
						
						<%--options.xAxis.categories = new Array();
				    	for (var i = 0; i < 13; i++) {
		    			 		options.xAxis.categories[i] = i + 1;
	    			 	}--%>
			    		var chart = new Highcharts.Chart(options);
					}
				});
	}
	
	//温度面积
	function generatelinearea() {
	$('#container').after("<div id=\"containerLineArea\"></div>");
				var options = {
					chart: {
						renderTo:'containerLineArea',
						defaultSeriesType: 'area',
						marginRight: 130,
						marginBottom: 25
					},
					title: {
						text: '我的标题',
						x: -20 //center
					},
					subtitle: {
						text: '来源: ccut.com',
						x: -20
					},
					credits: {
						text: 'Example.com',
        				href: 'http://www.example.com',
        				enabled: true,//是否显示Highcharts.com
        				position: {
            				align: 'left',
            				x: 10
        				}
   					},
					xAxis: {
						categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
							'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
					},
					yAxis: {
						title: {
							text: '摄氏度 (°C)'
						},
						//gridLineWidth: 10,//001墙壁的横线会变粗
						plotLines: [{
							value: 0,
							width: 1,
							color: '#808080'
						}]
					},
					tooltip: {
						formatter: function() {
				                return '<b>'+ this.series.name +'</b><br/>'+
								this.x +': '+ this.y +'摄氏度';
						}
					},
					legend: {
						layout: 'vertical',
						align: 'right',
						verticalAlign: 'top',
						x: 0,
						y: 100,
						borderWidth: 0
					},
					plotOptions: {
						area: {
							marker: {
								enabled: false,
								states: {
									hover: {
										enabled: true
									}
								}
							}
						}
					},
					series:[]
				};
				
				$.ajax({  
					type: "get", 
					url: '<%=request.getContextPath()%>/highcharts/listLineDatas.action', 
					data: "iId=" + "" ,
					dataType: 'json',
					success:  function(json){
					
						for (var i = 0; i < json.rows.length; i++) {
							options.series.push(json.rows[i]);
						}
						
						<%--options.xAxis.categories = new Array();
				    	for (var i = 0; i < 13; i++) {
		    			 		options.xAxis.categories[i] = i + 1;
		    			 }--%>
						
			    		var chart = new Highcharts.Chart(options);
					}
				});
	}

	function generatelinebar() {
		$('#container').after("<div id=\"containerLineBar\"></div>");
		var options = {
					chart: {
						renderTo:'containerLineBar',
						defaultSeriesType: 'bar'
					},
					title: {
						text: '我的标题',
						x: -20 //center
					},
					subtitle: {
						text: '来源: ccut.com',
						x: -20
					},
					credits: {
						text: 'Example.com',
        				href: 'http://www.example.com',
        				enabled: true,//是否显示Highcharts.com
        				position: {
            				align: 'left',
            				x: 10
        				}
   					},
					xAxis: {
						categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
							'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
					},
					yAxis: {
						title: {
							text: '摄氏度 (°C)'
						},
						//gridLineWidth: 10,//001墙壁的横线会变粗
						plotLines: [{
							value: 0,
							width: 1,
							color: '#808080'
						}]
					},
					tooltip: {
						formatter: function() {
				                return '<b>'+ this.series.name +'</b><br/>'+
								this.x +': '+ this.y +'摄氏度';
						}
					},
					legend: {
						layout: 'vertical',
						align: 'right',
						verticalAlign: 'top',
						x: 0,
						y: 100,
						borderWidth: 0
					},
					series:[]
				};
				
				$.ajax({  
					type: "get", 
					url: '<%=request.getContextPath()%>/highcharts/listLineDatas.action', 
					data: "iId=" + "" ,
					dataType: 'json',
					success:  function(json){
					
						for (var i = 0; i < json.rows.length; i++) {
							options.series.push(json.rows[i]);
						}
						
						<%--options.xAxis.categories = new Array();
				    	for (var i = 0; i < 13; i++) {
		    			 		options.xAxis.categories[i] = i + 1;
		    			 }--%>
						
			    		var chart = new Highcharts.Chart(options);
					}
				});
	}
	function generatelinepie() {
		$('#container').after("<div id=\"containerLinePie\"></div>");
		var options = {
					chart: {
						renderTo:'containerLinePie',
						defaultSeriesType: 'pie'
					},
					title: {
						text: '我的标题',
						x: -20 //center
					},
					subtitle: {
						text: '来源: ccut.com',
						x: -20
					},
					credits: {
						text: 'Example.com',
        				href: 'http://www.example.com',
        				enabled: true,//是否显示Highcharts.com
        				position: {
            				align: 'left',
            				x: 10
        				}
   					},
					xAxis: {
						categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
							'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
					},
					yAxis: {
						title: {
							text: '摄氏度 (°C)'
						},
						//gridLineWidth: 10,//001墙壁的横线会变粗
						plotLines: [{
							value: 0,
							width: 1,
							color: '#808080'
						}]
					},
					tooltip: {
						formatter: function() {
				                return '<b>'+ this.series.name +'</b><br/>'+
								this.x +': '+ this.y +'摄氏度';
						}
					},
					legend: {
						layout: 'vertical',
						align: 'right',
						verticalAlign: 'top',
						x: 0,
						y: 100,
						borderWidth: 0
					},
					series:[]
				};
				
				$.ajax({  
					type: "get", 
					url: '<%=request.getContextPath()%>/highcharts/listLineDatas.action', 
					data: "iId=" + "" ,
					dataType: 'json',
					success:  function(json){
					
						for (var i = 0; i < json.rows.length; i++) {
							options.series.push(json.rows[i]);
						}
						
						<%--options.xAxis.categories = new Array();
				    	for (var i = 0; i < 13; i++) {
		    			 		options.xAxis.categories[i] = i + 1;
		    			 }--%>
						
			    		var chart = new Highcharts.Chart(options);
					}
				});
	}
	
	function generatelinecolumn() {
		$('#container').after("<div id=\"containerLineColumn\"></div>");
				var options = {
					chart: {
						renderTo:'containerLineColumn',
						defaultSeriesType: 'column'
					},
					title: {
						text: '我的标题',
						x: -20 //center
					},
					subtitle: {
						text: '来源: ccut.com',
						x: -20
					},
					credits: {
						text: 'Example.com',
        				href: 'http://www.example.com',
        				enabled: true,//是否显示Highcharts.com
        				position: {
            				align: 'left',
            				x: 10
        				}
   					},
					xAxis: {
						categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
							'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
					},
					yAxis: {
						title: {
							text: '摄氏度 (°C)'
						},
						//gridLineWidth: 10,//001墙壁的横线会变粗
						plotLines: [{
							value: 0,
							width: 1,
							color: '#808080'
						}]
					},
					tooltip: {
						formatter: function() {
				                return '<b>'+ this.series.name +'</b><br/>'+
								this.x +': '+ this.y +'摄氏度';
						}
					},
					legend: {
						layout: 'vertical',
						align: 'right',
						verticalAlign: 'top',
						x: 0,
						y: 100,
						borderWidth: 0
					},
					series:[]
				};
				
				$.ajax({  
					type: "get", 
					url: '<%=request.getContextPath()%>/highcharts/listLineDatas.action', 
					data: "iId=" + "" ,
					dataType: 'json',
					success:  function(json){
					
						for (var i = 0; i < json.rows.length; i++) {
							options.series.push(json.rows[i]);
						}
						
						<%--options.xAxis.categories = new Array();
				    	for (var i = 0; i < 13; i++) {
		    			 		options.xAxis.categories[i] = i + 1;
		    			 }--%>
						
			    		var chart = new Highcharts.Chart(options);
					}
				});
	}
	
	function delLine() {
	  
		$('#containerLine').remove();
	}
	function delLineArea() {
	  
		$('#containerLineArea').remove();
	}
	function delLineBar() {
	  
		$('#containerLineBar').remove();
	}
	function delLinePie() {
	  
		$('#containerLinePie').remove();
	}
	function delLineColumn() {
	  
		$('#containerLineColumn').remove();
	}
</script>


</head>
<body>
<button id="linechart" onclick="generateline()">LineChartBasic</button><a href="#" onclick="delLine()">删除</a><br>
<button id="lineareachart" onclick="generatelinearea()">LineAreaChart</button><a href="#" onclick="delLineArea()">删除</a><br>
<button id="linebarchart" onclick="generatelinebar()">LineBarChart</button><a href="#" onclick="delLineBar()">删除</a><br>
<button id="linepiechart" onclick="generatelinepie()">LinePieChart</button><a href="#" onclick="delLinePie()">删除</a><br>
<button id="linecolumnchart" onclick="generatelinecolumn()">LineColumnChart</button><a href="#" onclick="delLineColumn()">删除</a><br>
<div id="container"></div>
</body>
</html>